html {
  scroll-behavior: smooth;
}

.header {
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: #111;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;

  .logo {
    color: #ffffff;
    text-transform: uppercase;
    font-family: OSBold;
    font-size: 1.5em;
    padding: 20px 10px;

    &:hover {
      color: #ffffff;
    }
  }

  .nav {
    li {
      a {
        text-transform: uppercase;
        padding: 20px 10px;
        font-family: OSBold;
        font-size: 1em;
        border-bottom: 3px solid transparent;
        transition: all linear .3s;

        &:hover {
          color: #ffffff;
          border-bottom: 3px solid #515151;
          transform: translateY(-5px);
        }
      }
    }
  }

  // 媒体查询：当浏览器尺寸到达指定尺寸，执行某些样式规则
  // @media 屏幕 and 条件
  // 1、PC端与移动端切换，导航栏的样式
  @media screen and (max-width: 770px) {
    .nav {
      .logo {
        font-size: 2em;
      }

      li {
        a {
          text-align: center;
          font-size: 1em;
        }
      }
    }
  }
}

.banner {
  background-color: #111;
  padding: 12em 0 9em; //撑开盒子的作用
  color: #919191;
  text-align: center;

  .title {
    text-transform: uppercase; // 英文字母变为大写
    font-size: 2.5em;
    font-family: OSLight;
    letter-spacing: 1px;

    span {
      color: #fcac45;
      font-family: OSBold;
    }
  }

  .desc {
    font-family: OSLight;
    font-size: 1.5em;
    margin-bottom: 14em;

    span {
      font-family: OSBold;
      color: #bebebe;
    }
  }

  .more-btn {
    width: 2.5em;
    height: 2.5em;
    line-height: 2em;
    border-radius: 100px;
    text-decoration: none;
    border: 2px solid #c3c3c3;
    color: #c3c3c3;
    font-size: 1.3em;
    transition: all linear .3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0px 4px 4px 1px #afafaf;
    }
  }

  @media screen and (max-width: 500px) {
    padding: 10em 0 12em;

    .title {
      font-size: 2em;
    }

    .desc {
      font-size: 1em;
      margin-bottom: 14em;
    }
  }
}

.about {
  background-color: #ffffff;

  .container {
    display: flex;
    padding: 8em 0 1em;

    .left {
      flex-shrink: 0.8;
    }

    .right {
      width: 45%;

      .title {
        width: 100%;
        text-transform: uppercase;
        margin-bottom: 1.5em;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        .top {
          color: #636363;
          font-size: 1.5em;
          font-family: OSLight;
          margin-bottom: 2px;
        }

        .bottom {
          color: #222222;
          font-size: 2.5em;
          font-family: OSLight;

          span:first-child {
            border-bottom: 3px solid #fcac45;
          }

          span:last-child {
            font-family: OSBold;
          }
        }
      }

      .content {
        color: #6c6c6c;
        font-size: 1.3em;
        font-family: OSLight;
        margin-bottom: 2em;
      }

      .list {
        width: 100%;
        font-size: 1.2em;
        font-family: OSLtalic;
        color: #6c6c6c;
        margin-bottom: 1.5em;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        li {
          display: flex;
          margin-bottom: 10px;

          span:first-child {
            color: #5a5a5a;
            margin-top: 3px;
            margin-right: 5px;
          }

          span:last-child {
            color: #5a5a5a;
            font-family: OSBold;
            margin-right: 5px;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      .more {
        width: 40%;
        border: 1px solid #7f7f7f;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.6em 1.5em;
        font-size: 1.2em;
        cursor: pointer;
        transition: all linear .3s;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        &:hover {
          transform: translateY(-10px);
          box-shadow: 0px 5px 5px 1px #cfcfcf;
        }

        span:first-child {
          color: #5a5a5a;
          margin-right: 5px;
          margin-top: -2px;
        }
      }
    }
  }

  @media screen and (max-width: 1000px) {
    .container {
      width: 90%;
      padding: 5em 0 3em;

      .left {
        display: none;
      }

      .right {
        width: 100%;
      }
    }
  }

  @media screen and (max-width: 500px) {
    .container {
      .right {
        .title {
          .top {
            font-size: 1.2em;
          }

          .bottom {
            font-size: 2em;
          }
        }

        .content {
          font-size: 1.1em;
        }

        .list {
          font-size: 1em;
        }

        .more {
          font-size: 1em;
        }
      }
    }
  }
}

.team {
  width: 100%;
  background: #111;
  padding: 5em 0 2em;
  overflow: hidden;
  text-align: center;
  color: #fff;

  .container {
    .subject {
      font-size: 2.5em;
      background: url('../images/title-background.png') no-repeat bottom center;
      text-transform: uppercase;
      padding-bottom: .8em;
      font-family: OSLight;
      margin-bottom: 2em;

      span {
        font-family: OSBold;
      }
    }

    .list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      margin-bottom: 3.5em;

      .item {
        width: 22%;
        transition: all linear .3s;

        &:hover {
          transform: translateY(-10px);
          box-shadow: 0px 0px 5px 1px #afafaf;
        }

        .photo {
          width: 80%;
          border-radius: 100px;
          overflow: hidden;
          margin: 0 auto 1.5em;

          img {
            width: 100%;
          }
        }

        .content {
          .name {
            font-family: OSBold;
            font-size: 1.5em;
          }

          .job {
            margin-bottom: 1em;
          }
        }
      }
    }

    .more {
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        width: 0.8em;
        height: 0.8em;
        background: #fff;
        cursor: pointer;
        margin-right: .5em;
        transition: all linear .3s;

        &:hover {
          background: #fcac45;
        }
      }
    }
  }

  @media screen and (max-width:500px) {
    .container {
      width: 95%;

      .subject {
        font-size: 2em;
      }

      .list {
        flex-wrap: wrap;
        margin-bottom: 1em;

        .item {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;

          .photo {
            border-radius: 0px;
          }

          .content {
            text-align: left;
            padding-left: 1em;
          }
        }
      }

      .more {
        span {
          width: 0.5em;
          height: 0.5em;
        }
      }
    }
  }
}

.services {
  width: 100%;
  background-color: #ffffff;
  padding: 6em 0 3em;
  overflow: hidden;
  text-align: center;

  .container {
    .subject {
      text-transform: uppercase;
      font-size: 2.5em;
      color: #222222;
      font-family: OSLight;
      background-image: url(../images/title-background.png);
      background-repeat: no-repeat;
      background-position: bottom center;
      padding-bottom: .8em;
      margin-bottom: 1em;

      span {
        font-family: OSBold;
      }
    }

    .content {
      width: 94%;
      color: #6c6c6c;
      font-size: 1em;
      margin-bottom: 6em;
    }

    .list {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item {
        width: 22%;
        transition: all linear .3s;

        &:hover {
          transform: translateY(-10px);
          box-shadow: 0px 0px 5px 1px #cfcfcf;
        }

        .icon {
          width: 80%;
          border-radius: 100px;
          overflow: hidden;
          border: 5px solid #fcac45;
          margin: 0 auto 1.5em;

          img {
            width: 100%;
          }
        }

        .characters {
          .title {
            text-transform: uppercase;
            color: #222222;
            font-family: OSBold;
            font-size: 1.5em;
            margin-bottom: .5em;
          }

          .text {
            color: #595959;
          }
        }
      }
    }
  }

  @media screen and (max-width: 500px) {
    .container {
      width: 95%;

      .subject {
        font-size: 2em;
      }

      .content {
        margin-bottom: 2em;
      }

      .list {
        flex-wrap: wrap;
        margin-bottom: .5em;

        .item {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;

          .icon {
            border-radius: 0px;
          }

          .characters {
            text-align: left;
            padding-left: 5px;

            .title {
              font-size: 1.2em;
              margin-bottom: .2em;
            }
          }
        }
      }
    }

  }
}

.clients {
  width: 100%;
  background-color: #111;
  padding: 6em 0 4em;
  text-align: center;
  overflow: hidden;

  .container {
    .subject {
      text-transform: uppercase;
      font-size: 2.5em;
      color: #ffffff;
      font-family: OSLight;
      background-image: url(../images/title-background.png);
      background-repeat: no-repeat;
      background-position: bottom center;
      padding-bottom: .8em;
      margin-bottom: 3em;

      span {
        font-family: OSBold;
      }
    }

    .desc {
      width: 55%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 0 auto 5em;

      img {
        width: 7em;
        height: 1.5em;
      }
    }

    .more {
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        width: 0.8em;
        height: 0.8em;
        background: #fff;
        cursor: pointer;
        margin-right: .5em;
        transition: all linear .3s;

        &:hover {
          background: #fcac45;
        }
      }
    }
  }

  @media screen and (max-width: 500px) {
    .container {
      .subject {
        font-size: 2em;
      }

      .desc {
        font-size: 1.5em;
        flex-wrap: wrap;

        img {
          width: 6em;
          height: 1em;
          margin-bottom: 1em;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      .more {
        span {
          width: 0.5em;
          height: 0.5em;
        }
      }
    }
  }
}

.work {
  width: 100%;
  background: #fff;
  padding: 5em 0 1em;
  overflow: hidden;
  text-align: center;

  .container {
    .subject {
      font-size: 2.5em;
      background: url('../images/title-background.png') no-repeat bottom center;
      text-transform: uppercase;
      padding-bottom: .8em;
      font-family: OSLight;
      margin-bottom: 1em;

      span {
        font-family: OSBold;
      }
    }

    .desc {
      color: #6c6c6c;
      font-size: 1em;
      font-family: OSLight;
      margin-bottom: 5em;
    }

    .box {
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1em;

        .left {
          font-family: OSBold;
          font-size: 1.2em;
          text-transform: uppercase;
        }

        .right {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          flex-wrap: nowrap;

          a {
            font-size: 1.2em;
            color: #6c6c6c;
            border-right: 1px solid #6c6c6c;
            padding: 0 1em;
            transition: all linear .3s;

            &:hover {
              text-shadow: 0px 0px 10px #6c6c6c;
            }

            &:last-child {
              border-right: 0px;
            }
          }
        }

        .option {
          display: none;
        }
      }

      .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        .item {
          width: 23%;
          position: relative;
          margin-bottom: 1em;
          overflow: hidden;
          cursor: pointer;

          &:hover .mask {
            top: 0;
            opacity: 1;
          }

          img {
            width: 100%;
          }

          .mask {
            position: absolute;
            left: 0;
            top: -100%;
            width: 100%;
            height: 100%;
            background: #222222;
            color: #fff;
            padding-top: 3em;
            transition: all linear .3s;
            opacity: 0;

            .title {
              font-size: 1.2em;
              font-family: OSBold;
              text-transform: uppercase;
              margin-bottom: .5em;
            }

            .short {
              font-size: 1em;
              color: #9e9e9e;
              margin-bottom: 4em;
            }

            .btns {
              width: 2em;
              height: 2em;
              line-height: 1.8em;
              text-align: center;
              font-size: 1.5em;
              color: #fcac45;
              border: 2px solid #fcac45;
              transition: all linear .3s;
              margin: 0 auto;
              border-radius: 100px;

              &:hover {
                transform: translateY(-10px);
                box-shadow: 0px 10px 10px 1px #000;
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width:550px) {
    .container {
      width: 95%;

      .subject {
        font-size: 2em;
      }

      .box {
        .top {
          .right {
            display: none;
          }

          .option {
            display: inline-block;
          }
        }

        .list {
          .item {
            width: 48%;
          }
        }
      }
    }
  }

  @media screen and (max-width:450px) {
    .container {
      .box {
        .list {
          .item {
            width: 100%;

            .mask {
              .title {
                font-size: 1.8em;
              }

              .short {
                font-size: 1.4em;
              }
            }
          }
        }
      }
    }
  }
}

.testimonials {
  width: 100%;
  background-color: #111;
  padding: 6em 0 4em;
  text-align: center;
  overflow: hidden;

  .container {
    .subject {
      text-transform: uppercase;
      font-size: 2.5em;
      color: #efefef;
      font-family: OSLight;
      padding-bottom: .8em;
      background-image: url(../images/title-background.png);
      background-repeat: no-repeat;
      background-position: bottom center;
      margin-bottom: 3em;

      span {
        font-family: OSBold;
      }
    }

    .content {
      width: 68%;
      font-size: 1em;
      color: #c2c2c2;
      margin: 0 auto 2em;
      text-transform: uppercase;
    }

    .ceo {
      font-family: OSBold;
      font-size: 1em;
      color: #9a9a9a;
      margin-bottom: 2em;

      span {
        font-family: OSLight;
        color: #bebebe;
      }
    }

    .more {
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        width: 0.8em;
        height: 0.8em;
        background: #fff;
        cursor: pointer;
        margin-right: .5em;
        transition: all linear .3s;

        &:hover {
          background: #fcac45;
        }
      }
    }
  }

  @media screen and (max-width: 500px) {
    .container {
      width: 95%;
      .subject {
        font-size: 2em;
      }

      .more {
        span {
          width: 0.5em;
          height: 0.5em;
        }
      }
    }

  }
}

.contact{
  width:100%;
  background:#fff;
  padding:5em 0 1em;
  overflow: hidden;
  text-align: center;

  .container{
    .subject{
      font-size:2.5em;
      background:url('../images/title-background.png') no-repeat bottom center;
      text-transform: uppercase;
      padding-bottom:.8em;
      font-family: OSLight;
      margin-bottom:1em;

      span{
        font-family: OSBold;
      }
    }

    .desc{
      color:#6c6c6c;
      font-size:1.2em;
      font-family: OSLight;
      margin-bottom:5em;
    }

    .box{
      .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom:1em;

        .item{
          width:49%;
          text-align: left;

          div{
            font-size: 1.2em;
            font-family: OSLight;
            margin-bottom:.4em;
            
            sup{
              color: red;
            }
          }

          input{
            display: block;
            width:100%;
            height:2em;
            line-height: 2em;
            font-size:1.2em;
            border:1px solid #6c6c6c;
          }
        }
      }

      .content{
        width:100%;
        text-align: left;
        margin-bottom: 1em;

        div{
          font-size: 1.2em;
          font-family: OSLight;
          margin-bottom:.4em;
          
          sup{
            color: red;
          }
        }

        textarea{
          display: block;
          width:100%;
        }

      }

      .action{
        width:100%;
        text-align: right;

        .send{
          width:10em;
          height:2.2em;
          line-height: 2.2em;
          background:#fcac45;
          text-align: center;
          font-family: OSBold;
          font-size:1.2em;
          font-weight: bold;
          text-transform: uppercase;
          color:#fff;
          border:0px;
          transition: all linear .3s;

          &:hover{
            transform:translateY(-10px);
            box-shadow: 0px 5px 1px 1px #cfcfcf;
          }
        }
      }
    }
  }

  @media screen and (max-width:500px){
    .container{
      width:95%;

      .subject{
        font-size:2em;
      }

      .box{
        .top{
          flex-wrap: wrap;

          .item{
            width:100%;
            margin-bottom:1em;
          }
        }

        .action{
          text-align: center;
        }
      }
    }
  }
}

.footer{
  width:100%;
  background:#111;
  padding:3em 0;
  overflow: hidden;
  color:#fff;

  .container{
    display: flex;
    justify-content: space-between;
    align-items: center;

    &::before,&::after{
      content: '';
      display: none;
    }

    p{
      font-size:1.2em;
      font-family: OSLight;
      letter-spacing: 1px;

      span{
        font-family: OSBold;
      }
    }

    .list{
      width: 25%;
      display: flex;
      justify-content: space-around;

      a{
        flex-shrink: 0;
        width:3em;
        height:3em;
        border:3px solid #6c6c6c;
        border-radius: 100px;
        overflow: hidden;
        transition: all linear .3s;

        &:hover{
          transform: translateY(-10px);
          box-shadow: 0px 4px 4px 1px #afafaf;
        }

        img{
          width:100%;
        }
      }

    }


  }

  @media screen and (max-width:900px){
    .container{
      width:100%;
      flex-wrap: wrap;

      .copyright{
        width:100%;
        margin-bottom: 2em;
        text-align: center;
      }

      .list{
        width:100%;
      }


    }
  }
}

.backup{
  width:70px;
  height:70px;
  position: fixed;
  right: 45px;
  bottom:45px;

  a{
    width:100%;
    height:100%;

    &:hover{
      animation: up 1s;
    }
  }

  // 动画组
  // 1s = 100% 0% 10% 20% 30% 100%(完成时动画效果)
  @keyframes up {
    0% {
      // transform: scale3d(x, y, z);
      // 0 - 0.9 缩小 《 1 》 1.1 放大
      transform: scale3d(1, 1, 1);
    } 
  
    30% {
      transform: scale3d(1.25, 0.75, 1);
    }
  
    40% {
      transform: scale3d(0.75, 1.25, 1);
    }
  
    50% {
      transform: scale3d(1.15, 0.85, 1);
    }
  
    65% {
      transform: scale3d(.95, 1.05, 1);
    }
  
    75% {
      transform: scale3d(1.05, .95, 1);
    }
  
    100% {
      transform: scale3d(1, 1, 1);
    }
  }

  @media screen and (max-width: 500px) {
    width: 50px;
    height: 50px;
  }
}

